require('../css/joinGoodsList.less');
// 众筹
window.onload = function () {
    // 商品展示图片
    let maxImg = document.querySelector('.bigimg');
    let user = JSON.parse(localStorage.getItem('user'));
    // 获取dom
    let Minimgs = document.querySelector('.zcMinBoximgs');
    // 众筹商品小图片
    let minTexttitle = document.querySelector('.zcMinBoxTexttitle');
    // 参与众筹人数
    let rens = document.querySelector('.rens');
    // 现价
    let xianjia = document.querySelector('.xianjia');
    // 原价
    let yuanjia = document.querySelector('.yuanjia');
    // 众筹截止时间
    let tian = document.querySelector('.tian');

    let MM = document.querySelector('.MAXMax')

    // 请求 get
    http.get('http://23.224.181.169:8098/joinGoods/list?id=' + user.id, function (res) {
        console.log(res);
        // 循环
        for (let a = 0; a < res.data.length; a++) {
            if (res.data[a].big_img != null) {
                console.log(res.data[a]);
                // 替换商品信息
                maxImg.src = `http://23.224.181.169:8098${res.data[a].big_img}`;
                // 众筹商品小图片
                Minimgs.src = `http://23.224.181.169:8098${res.data[a].img}`;
                // 众筹商品名
                minTexttitle.innerText = res.data[a].title;
                // 参与众筹人数
                rens.innerText = res.data[a].join_person;
                // 现价
                xianjia.innerText = res.data[a].original_price;
                // 原价
                yuanjia.innerText = res.data[a].present_price;
                // 众筹截止时间
                tian.textContent = utils.countDown(res.data[a].end_time)[0];
            }

            // 众筹小商品
            let div = document.createElement('div'); //创建一个div
            div.className = 'zcMinBox'
            div.innerHTML = `
                <div class="zcMinBoximg">
                <img class="zcMinBoximgs" src="http://23.224.181.169:8098${res.data[a].img}" alt="">
            </div>
            <div class="zcMinBoxText">
                <div class="zcMinBoxTexttitle">${res.data[a].title}</div>
                <div class="zcMinBoxTexttotal_person">
                    <div class="jdtBox">
                        <div class="jdt" style="width: ${res.data[a].total_person}%;"></div>
                    </div>
                    <div class="jdu">
                        <span class="jingdu">${res.data[a].total_person}</span> %
                    </div>
                </div>
                <div class="zcMinBoxTextjoin_person"><span class="">${res.data[a].join_person}</span>人支持&nbsp;|&nbsp;剩余<span>${utils.countDown(res.data[a].end_time)[0]}</span> 天</div>
                <div class="zcMinBoxTextpresent_price">
                    <div class="ac">
                        <span class="redText">￥<span class="">${res.data[a].present_price}</span><span>起</span></span>
                        <span class="greyText">￥<span class="">${res.data[a].original_price}</span></span>
                    </div>
                    <div class="aa">
                        <a href="">立即支持</a> </div>
                </div>
            </div>
                `
            // 追加到页面
            MM.appendChild(div);
        }
    })

}